<template>
  <WidgetBase :data="data" @drop.native.stop>
    <ElCheckbox
      class="fa-widget-checkbox__checkbox"
      :class="{ 'is-readonly': !data.isUse }"
      :disabled="!data.isUse"
      v-model="data.value"
    />
  </WidgetBase>
</template>

<script lang="ts">
import { defineComponent, toRef, watch } from 'vue'
import { Widget } from '@/models'
import WidgetBase from '@/components/widget-base/WidgetBase.vue'

/** 复选框控件 */
export default defineComponent({
  name: 'FaWidgetCheckbox',

  components: { WidgetBase },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    // 设置时如果必填则勾选
    watch(
      () => data.value.required,
      required => ((data.value.value as unknown as boolean) = required)
    )

    // 如果必填，则值不允许为 false
    watch(
      () => data.value.value,
      checked => {
        if (!checked && data.value.required) {
          ;(data.value.value as unknown as boolean) = true
        }
      }
    )

    return {}
  }
})
</script>

<style lang="scss">
.fa-widget-checkbox {
  $size: 16px;

  .fa-widget__box {
    top: -50%;
    left: -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2 * $size;
    height: 2 * $size;
  }

  &__checkbox {
    line-height: 1;
  }

  &.widget-mode-set {
    .el-checkbox__input.is-disabled .el-checkbox__inner {
      cursor: move;
    }
  }
}

// 参与方颜色样式
@each $c, $color in $actor-colors {
  .fa-widget-checkbox.actor-#{$c} {
    &:hover .fa-widget__box {
      background: rgba(mix(#fff, $color, 80%), 0.7);
    }

    @include setCheckboxColor($color);
  }
}
</style>
